<template>
	<view class="login">
		<view class="l-img">
			<image :src="imgUrl"></image>
		</view>
		<view class="l-title">渤海P2C商品贸易中心</view>
		<m-input :type="'account'" :placeholder="'请输入手机号'"  v-model="params.mobile" :maxlength="11"></m-input>
		<m-input :type="'password'" :placeholder="'请输入密码'" v-model="params.password" :maxlength="20"></m-input>
		<button class="l-btn" @tap="handleLogin()">登录</button>
		<view class="l-forget"><text @tap="goPage()">忘记密码?</text></view>
		<view class="check_box">
			<view>
				<van-checkbox class="s-all" shape="square"  :value="ping_checked" checked-color="#333333" @change="handleSelect2">
				</van-checkbox>
			</view>
			<view class="tips_text">
				登录即代表您同意<text @tap="goWatchPrivate()" class="agreement">《用户服务与隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import MInput from '@/components/m-input.vue'
	export default {
		name:"login",
		data() {
			return {
				params:{
					mobile:"",
					password:""
				},
				imgUrl:this.$mConfig.assetsPath+"/static/img/bohai_logo.png",
				ping_checked:true,
			}
		},
		components:{
			MInput
		},
		methods: {
			goWatchPrivate(){ // 查看隐私协议
				this.$router.push({
					route:this.$routesConfig.privateAgreement,
				})
			},
			handleSelect2(){ // ping选择单选框
				this.ping_checked=!this.ping_checked
			},
			async handleLogin(){
				let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
				if(this.params.mobile==='' || this.params.password==='' ){
					uni.showToast({
						title: "请输入完整账户密码",
						icon: "none",
					})
					return
				}
				if(!reg.test(this.params.mobile)){
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
					})
					return
				}
				if(!this.ping_checked){
					uni.showToast({
						title: "请阅读并同意相关协议",
						icon: "none",
					})
					return
				}
				let resData=await this.$apis.login(this.params)
				if(resData.code===0){
					uni.showToast({
						title:"登录成功",
						icon:"success",
						duration:1500
					})
					setTimeout(()=>{
						this.$store.commit("SETTOKEN",resData.data.access_token)
						this.$store.commit("SET_USERINFO",resData.data)
						// 向账号记录列表里面添加
						let data={mobile:this.params.mobile,password:this.params.password,image:resData.data.avatar,member_id:resData.data.member_id}
						let userLists=[]
						let flag=true
						if(uni.getStorageSync("userLists").length>0){
							userLists=uni.getStorageSync("userLists")
							userLists.forEach((item)=>{ // 判断是否重复添加
								if(item.mobile===this.params.mobile){
									flag=false
									return
								}
							})
						}
						if(flag){
							userLists.push(data)
							uni.setStorageSync("userLists",userLists)
						}

						uni.reLaunch({
							url: '/pages/main/home'
						})
					},1000)
				}




			},
			goPage(){
				uni.navigateTo({
					url:'forget',
					success() {

					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
   .login{
	   position: absolute;
	   bottom: 0;
	   top: 0;
	   left: 0;
	   right: 0;
	   background-image: url("https://qiniu.scxhrd.com/static/img/login_bak.png");
	   background-size: 100% 100%;
	   .l-img{
		   width: 100rpx;
		   height: 100rpx;
		   margin: 80rpx auto 0;
		   image{
			   width: 100%;
			   height: 100%;
			   display: block;
			   border-radius: 50%;
		   }
	   }
	   .l-title{
		   margin-top: 20rpx;
		   text-align: center;
		   font-size: 42rpx;
		   margin-bottom:40rpx
	   }
	   .l-btn{
		  width: 400rpx;
		  height: 80rpx;
		  /*background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));*/
		  /*background-color: #999999;*/
		  color: #333333;
		  line-height: 80rpx;
		  font-size: 34rpx;
		  margin-top: 100rpx;
	   }
	   .l-btn::after{
		   border: none;
	   }
	   .l-forget{
		   width: 100%;
		   text-align: center;
		   margin-top: 20rpx;
		   text{
			   font-size: 26rpx;
			   color: gray;
		   }
	   }
   }
   .check_box{
	   margin-left: 65rpx;
	   margin-bottom: 30rpx;
	   margin-top: 20rpx;
	   display: flex;
	   flex-direction: row;
	   justify-content: left;
   }
   .agreement{
	   color: #555555;
   }
   .tips_text{
	   margin-left: 20rpx;
   }
</style>
